/* eslint-disable vue/no-dupe-keys */
<template>
  <div class="leftmiddlewrap">
      <div class="leftmiddle">
          <div class="title">CPU统计</div>
          <div class="showdatalist">
              <LeftMiddleRing v-for="(per,index) in CPUCountData" :key="per+index" :per="CPUCountData[index]"/>
            </div>
      </div>
      <div class="rightmiddle">
          <div class="title">内存统计</div>
          <div class="showdatalist">
              <LeftMiddleBattery v-for="(per,index) in MemoryCountData" :key="per+index" :per="MemoryCountData[index]"/>
          </div> 
      </div>
  </div>
</template>

<script>
import LeftMiddleRing from './LeftMiddleRing.vue'
import LeftMiddleBattery from './LeftMiddleBattery.vue'

import {getCPUCount,getMemoryCount} from "../assets/api/api"

export default {
components: {
    LeftMiddleRing,
    LeftMiddleBattery
  },
    data(){
    return{
      CPUCountData:[],
      MemoryCountData:[],
      timer: null
    }
  },
  created(){
    this.fetchData()
    this.timer = setInterval(() => {
      this.fetchData()
    }, this.howtimeout)
  },
  destroyed() {
    clearInterval(this.timer)
  },
  mounted(){
    this.fetchData();
  },
  methods:{
    fetchData() {
      getCPUCount().then((res)=>{
        this.CPUCountData=res.data.result;
      });
      getMemoryCount().then((res)=>{
        this.MemoryCountData=res.data.result;
      });
    },
  },
}
</script>

<style lang="less" scoped>
@import url("../base.css");

.leftmiddle,.rightmiddle {
    width: 569px;
    height: 277px;
    text-align: center;
    font-size: 26px;
    color: #a4d6ff;
    .title {
        margin: 15px auto;
    }
    .showdatalist{
        width: 512px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 auto;
        .showdata {
            height: 114px;
            font-size: 14px;
            width: 128px;
        }
    }
}
.leftmiddle{
    float: left;
}
.rightmiddle {
    float: right;
}
</style>